<template>
  <!-- 添加产品按钮 -->
  <el-button type="primary" @click="goodsState.dialogGoodsVisible = true">
    +添加产品
  </el-button>
  <!-- 表格区域 -->
  <el-table :data="goodsState.goodsList" border="true">
    <el-table-column type="index" label="序号" width="70px" align="center" />
    <el-table-column prop="tmName" label="品牌名称  " align="center" />
    <el-table-column label="品牌logo" align="center">
      <template #default="scope">
        <img :src="scope.row.logoUrl" />
      </template>
    </el-table-column>
    <el-table-column label="品牌操作" align="center">
      <template #default="scope">
        <el-button type="warning" icon="Edit" @click="handleEdit(scope.row)">
          修改
        </el-button>
        <el-popconfirm
          title="你确认要删除吗?"
          @confirm="handleDelete(scope.row)"
        >
          <template #reference>
            <el-button type="danger" icon="Edit">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-pagination
    v-model:current-page="goodsState.goodsTit.page"
    v-model:page-size="goodsState.goodsTit.limit"
    :page-sizes="[1, 5, 10, 15]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="goodsState.total"
    @size-change="pageSizeChange"
    @current-change="currentPageChange"
  />
  <!-- 添加商品弹窗 -->
  <el-dialog
    v-model="goodsState.dialogGoodsVisible"
    title="添加商品品牌"
    width="30%"
  >
    <!-- 表单 -->
    <el-form ref="addGoodsFormRef" :rules="goodsRules" :model="addGoodsTit">
      <el-form-item label="商品名称" prop="tmName">
        <el-input v-model="addGoodsTit.tmName" />
      </el-form-item>
      <el-form-item label="上传LOGO">
        <!-- upload组件属性  action上传地址-->
        <el-upload
          drag
          action="/api/admin/product/fileUpload"
          multiple
          :before-upload="beforeAvatarUpload"
          :on-success="successAvatarUpload"
        >
          <img v-if="addGoodsTit.logoUrl" :src="addGoodsTit.logoUrl" />
          <el-icon v-else class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">点击上传或者拖拽上传</div>
          <template #tip>
            <div class="el-upload__tip">
              jpg/png files with a size less than 500kb
            </div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    <!-- 底部按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelAdd">取消</el-button>
        <el-button type="primary" @click="reqAddGoods(addGoodsFormRef)">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
/* 获取类型校验 */
import type { FormInstance, FormRules, UploadProps } from 'element-plus'
import type { reqAddGoodsList } from '@/apis/goods/brand/goodsTypes'
/* 从品牌仓库获取数据 */
import { useGoodsStateStore } from '@/store/goods/brand'
const goodsState = useGoodsStateStore()
onMounted(() => goodsState.getGoodsList(goodsState.goodsTit))
/* 每页条数变化时触发 */
const pageSizeChange = () => {
  goodsState.getGoodsList(goodsState.goodsTit)
}
/* 当前页码发生变化时触发 */
const currentPageChange = () => {
  goodsState.getGoodsList(goodsState.goodsTit)
}
/* 添加商品表单的ref===dom对象 */
const addGoodsFormRef = ref<FormInstance>()
/* 添加商品信息 */
const addGoodsTit = reactive<reqAddGoodsList>({
  tmName: '',
  logoUrl: '',
})
/* 添加商品规则校验 */
const goodsRules = reactive<FormRules>({
  tmName: [
    { required: true, message: '请填写商品名称', trigger: 'blur' },
    { min: 3, max: 5, message: '长度请填写为3-5位', trigger: 'blur' },
  ],
})
/* 上传图片前就行文件约束 */
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  const imgTit = ['image/png', 'image/jpeg']
  if (!imgTit.includes(rawFile.type)) {
    ElMessage.error('请上传JPG格式')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('上传文件大小不能超过2MB')
    return false
  }
  return true
}
/* 上传图片成功后的钩子函数 */
const successAvatarUpload: UploadProps['onSuccess'] = (raeFile) => {
  /* 判断是否成功 */
  if (raeFile.code != 200) ElMessage.error(raeFile.message)
  addGoodsTit.logoUrl = raeFile.data
}
/* 确认添加商品 */
const reqAddGoods = async (FormRef: FormInstance | undefined) => {
  /* 点击确认后发起添加请求 */
  if (!FormRef) return
  FormRef.validate((valid) => {
    if (valid) {
      goodsState.addGoods(addGoodsTit)
      goodsState.dialogGoodsVisible = false
      FormRef.resetFields()
    } else {
      alert('请正确输入')
      return false
    }
  })
}
/* 取消添加 */
const cancelAdd = () => {
  goodsState.dialogGoodsVisible = false
  delete addGoodsTit?.id
}
/* 品牌修改操作 */
const handleEdit = ({ id, tmName, logoUrl }: reqAddGoodsList) => {
  /* 显示修改弹窗 */
  goodsState.dialogGoodsVisible = true
  addGoodsTit.logoUrl = logoUrl
  addGoodsTit.tmName = tmName
  addGoodsTit.id = id
}
/* 品牌删除操作 */
const handleDelete = ({ id }: any) => {
  goodsState.deletGoods(id)
}
</script>

<style scoped lang="scss">
.el-button {
  margin-bottom: 20px;
}
.el-pagination {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translate(-50%, -50%);
}

img {
  width: 50px;
  height: 50px;
}
</style>
